<template>
  <view class="warp">
    <!-- 页面顶部 -->
    <view class="top" :style="{height: 'calc(440rpx + '+StatusBar+'px)',paddingTop: StatusBar+'px'}">
      <image :src="imgBaseUrl + 'user/login-bg.png'" mode="widthFix" class="bg_img"></image>
      <image class="logo" src="https://shengyuanadmin.hnshpjs.com/h5img/images/tab/logo.png" mode="widthFix" />
      <view class="name">中犇商城</view>
    </view>
    <view class="main">
      <!-- 输入手机号 start -->
      <view class="fu-input solid">
        <image class="fu-input-type" :src="imgBaseUrl + 'user/phone.png'" mode="aspectFit" />
        <input class="fu-input-main" :placeholder="i18n['请输入手机号']" placeholder-class="placeholderClass" type="number" maxlength="11" v-model="phone" />
      </view>
      <!-- 输入手机号 end -->

      <!-- 输入验证码 start -->
      <view class="fu-input solid" style="margin-top: 56rpx;">
        <image class="fu-input-type" :src="imgBaseUrl + 'user/yzm.png'" mode="aspectFit" />
        <input class="text-999 text-lg fu-input-main" :placeholder="i18n['请输入验证码']" placeholder-class="placeholderClass" type="text" maxlength="4" v-model="vercode" />
        <text @click="handleSendVerCode" class="text-df fu-get-verify">{{ beginning ? time + i18n['s后重新获取'] : i18n['获取验证码'] }}</text>
      </view>
      <!-- 输入验证码 end -->
      <view class="flex align-center justify-end">
        <view class="paw" @click="handleJump" data-type="REDIRECT" :data-url="PAGE_BASE_URL + 'login-password/index'">{{i18n['验证码登录']}}</view>
      </view>
      <!-- 立即登录按钮 start -->
      <view type="warn" :loading="is_click" class="fu-login-btn" shape="circle" @click="handleLogin">
        <text class="text-lg margin-left-sm">{{ i18n['立即登录'] }}</text>
      </view>
      <!-- 立即登录按钮 end -->
    </view>
    <!-- 隐私政策 start -->
    <view class="bottom-box">
    	<view class="third-box" >
    		<ThirdLogin :check="check"></ThirdLogin>
    	</view>
    	<view class="fu-privacy margin-top">
    		<view @click="changeCheck">
    			<image class="checkbox-img" mode="aspectFit" :src="imgBaseUrl + 'global/checked.png'" v-if="check"></image>
    			<image class="checkbox-img" mode="aspectFit" :src="imgBaseUrl + 'global/unchecked.png'" v-else></image>
    		</view>
    		<text class="text-sm text-666">
    			阅读并同意
    			<text class="fu-action" @click="goAhreement(15)">{{ i18n['《用户注册协议》'] }}</text>
    			{{ i18n['与'] }}
    			<text class="fu-action" @click="goAhreement(16)">{{ i18n['《隐私政策》'] }}</text>
    		</text>
    	</view>
    </view>
    <!-- 隐私政策 end -->
    <!-- 断网监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网监测 end -->
  </view>
</template>

<script>
// 引入验证方法
import { validate } from '@/common/utils/index';
import { SYSTEM_CONFIG } from "@/common/config.js";
import ThirdLogin from '../../components/third-login/third-login.vue';
export default {
  components: {
    ThirdLogin
  },
  data() {
    return {
      phone: '', // 手机号,@String
      vercode: '', // 验证码,@String
      is_click: false, // 立即登录按钮是否点击,@Boolean
      verCodeBtnLoading: false, // 是否显示加载图标,@Boolean
      time: 60, // 倒计时60S,@Number
      beginning: false, // 显示倒计时,@Boolean
      PAGE_BASE_URL: '/pages/user/login/', // 页面基础路径,@String
      timer: null, // 计时器,@Function
      check: false
    };
  },
  onUnload() {
    // 页面关闭时清除计时器，优化性能
    clearInterval(this.timer);
  },
  methods: {
    /**
     * @event
     * @description 去协议
     */
    goAhreement(val) {
      this.$urouter.navigateTo({
        url: '/pages/user/login/user-agreement/index',
        params: {
          id: val
        }
      });
    },
    /**
     * @event
     * @description 是否同意用户协议
     */
    changeCheck() {
      this.check = !this.check;
    },
    /**
     * @event 立即登录按钮点击事件
     */
    handleLogin() {
      if (!this.check) {
        this.$message.info(this.i18n['请阅读并勾选页面协议']);
        return false;
      }
      // 保存this
      let _this = this;

      // #ifdef APP-PLUS
      // @desc 隐藏安全键盘
      plus.key.hideSoftKeybord();
      // #endif

      // 如果按钮状态是加载中，直接return，防止用户多次点击
      if (_this.is_click) return;
      // 结构出来phone手机号，vercode验证码
      let { phone, vercode } = this;
      // 如果手机号为空就提示用户
      if (!phone) {
        this.$message.info(this.i18n['请输入手机号']);
        return false;
      }
      // 如果手机号不正确就提示用户
      if (!validate(phone, 'phone')) {
        this.$message.info(this.i18n['请正确输入手机号']);
        return false;
      }

      // 如果验证码为空就提示用户
      if (!vercode) {
        _this.$message.info(this.i18n['验证码不能为空']);
        return false;
      }
      // 上述验证都通过，将按钮的点击状态改为true
      _this.is_click = true;
      /**
       * @desc 请求验证码登录接口
       * @param {String} global.apiUrls.postUserMobileLogin - 请求的接口,v1/5c78dca45ebc1,
       * @param {Object} {} - 携带参数
       * @param {String} {}.mobile - 手机号
       * @param {String} {}.code - 验证码
       */
      _this.$api
        .post(global.apiUrls.postUserMobileLogin, {
          mobile: phone,
          code: vercode,
          user_source: SYSTEM_CONFIG.platform
        })
        .then(res => {
          // 如果返回code码为1，且数据存在
          if (res.data.code == 1 && res.data.data) {
            // 提示用户，后台返回的信息
            _this.$message.info(res.data.msg);
            /**
             * @desc 向Vue发送事件
             * @param {Object} res.data.data.userinfo - 后台返回来的用户信息
             */
            _this.$store.commit('updateUserInfo', res.data.data.userinfo);

            setTimeout(() => {
              // 延迟800ms后返回
              uni.navigateBack();
            }, 800);
          } else {
            // 错误的情况下向用户发送后台返回来的长度
            _this.$message.info(res.data.msg);
          }
          // 把按钮的状态改为false
          this.is_click = false;
        });
    },
    /**
     * @event 返回上一页
     */
    BackPage() {
      uni.navigateBack({
        delta: 1
      });
    },
    /**
     * @event 发送验证码
     */
    handleSendVerCode() {
      // 保存this
      let _this = this;
      // 从this里结构出来phone
      let { phone } = this;

      if (!phone) {
        this.$message.info(this.i18n['请输入手机号']);
        return false;
      }
      // 如果手机号不正确就提示用户
      if (!validate(phone, 'phone')) {
        this.$message.info(this.i18n['请正确输入手机号']);
        return false;
      }
      // 验证手机号 end

      // 如果有倒计时，return false
      if (this.beginning) return false;

      this.verCodeBtnLoading = true; // 显示加载状态
      this.beginning = true; // 显示倒计时

      /**
       * @desc 请求验证码接口
       * @param {Object} {} - 参数
       * @param {Boolean} {}.is_test - 是否是测试环境
       * @param {String} {}.mobile - 手机号
       * @param {String} {}.type - 类型
       */
      this.$api
        .post(global.apiUrls.GetVerifyCode, {
          is_test: global.IS_DEV,
          mobile: phone,
          type: '3'
        })
        .then(res => {
          // 改加载状态为false
          _this.verCodeBtnLoading = false;

          // 如果后台返回的code码为1
          if (res.data.code == 1) {
            _this.beginning = true;
            // 清除倒计时,防抖作用
            clearInterval(_this.timer);
            _this.timer = setInterval(() => {
              if (_this.time == 1) {
                //倒计时结束就清楚这个倒计时
                clearInterval(_this.timer);
                _this.time = 60; // 倒计时60s
                _this.beginning = false; // 是否显示倒计时改为false
                return;
              }
              _this.time--;
            }, 1000);
            // 向用户发送提示
            _this.$message.info(_this.i18n['验证码为'] + res.data.data.code + _this.i18n['请注意查收']);
          } else {
            _this.beginning = false; // 是否显示倒计时改为false
            // 如果报错，向用户提示
            _this.$message.info(res.data.msg);
          }
        })
        .catch(function(err) {
          // 接口错误打印错误
          console.log(err);
        });
    },
    /**
     * @event 跳转到邮箱登录页面
     */
    emailLogin() {
      uni.redirectTo({
        url: '/pages/user/login/login-email-code/index'
      });
    },
    /**
     * @event 微信登陆
     */
    wxLogin() {
      let _this = this;
      // #ifdef APP-PLUS
      // 如果是app环境打开微信
      if (
        plus.runtime.isApplicationExist({
          pname: 'com.tencent.mm',
          action: 'weixin://'
        })
      ) {
        uni.getProvider({
          service: 'oauth',
          success: function(res) {
            console.log(res);
            // 如果支持微信等，就执行 wx_login_fn 方法
            if (~res.provider.indexOf('weixin')) {
              _this.wx_login_fn();
            }
          },
          fail: function(err) {
            // api错误是打印错误
            console.log(err);
          }
        });
      } else {
        // 调起失败时提醒用户
        this.$message.info(this.i18n['请安装微信后再使用此功能']);
      }
      // #endif
    },
    /**
     * @function 微信授权登录
     */
    wx_login_fn() {
      let _this = this;
      /**
       * @desc uniapp的登陆api
       * @param {String} provider - 登录服务提供商
       * @param {login~success} loginRes - 接口调用成功时的回调函数
       */
      uni.login({
        provider: 'weixin',
        /**
         * @callback login~success
         * @param {Object} loginRes - api返回来的信息
         */
        success: function(loginRes) {
          /**
           * @desc 获取用户信息
           * @param {String} provider - 登录服务提供商
           * @param {Funtion} success - 接口调用成功时的回调函数
           */
          uni.getUserInfo({
            provider: 'weixin',
            /**
             * @callback success
             * @param {Object} infoRes - api返回来的信息
             */
            success: function(infoRes) {
              // 显示加载状态
              uni.showLoading({
                title: _this.i18n['加载中']
              });
              /**
               * @let {String} nickName - 结构出来的变量昵称
               * @let {String} avatarUrl - 解构出来的头像链接
               * @let {String} gender - 结构出来的性别
               */
              let { nickName, avatarUrl, gender } = infoRes.userInfo;
              // #ifdef APP-PLUS
              let clientId =  '';
              console.log('clientId', clientId);
              //  @const {Number} appSystem - 判断设备类型 1：ios；2：安卓；
              let appSystem = uni.getSystemInfoSync().platform == 'ios' ? 1 : 2;
              // #endif
              console.log(infoRes.userInfo.unionId, 'app微信登录');
              /**
               * @description 第三方登录请求接口
               */
              _this.$api
                .post(global.apiUrls.postUserSocialLogin, {
                  type: 1,
                  wx_unionid: infoRes.userInfo.unionId,
                  qq_unionid: '',
                  wb_unionid: '',
                  clientId: clientId || '',
                  appSystem: appSystem || '',
                  nickname: nickName,
                  avatar: avatarUrl,
                  gender: gender
                })
                .then(res => {
                  // 保存用户信息
                  global.tempUserLoginInfo = infoRes.userInfo;
                  // 关闭加载效果
                  uni.hideLoading();
                  if (res.data.code == 1) {
                    _this.$message.info(res.data.msg);
                    /**
                     * @description 向Vux发送用户信息保存
                     * @param {String} updateUserInfo - 调用的方法名称
                     * @param {Object} res.data.data.userinfo - 用户信息
                     */
                    _this.$store.commit('updateUserInfo', res.data.data.userinfo);
                    setTimeout(() => {
                      uni.navigateBack();
                    }, 800);
                  } else if (res.data.code == -999) {
                    /**
                     * @description 清除当前页面，跳转到绑定手机页面
                     */
                    _this.$urouter.redirectTo({
                      url: _this.PAGE_BASE_URL + 'bind-phone/index',
                      params: {
                        unionId: infoRes.userInfo.unionId,
                        openId: infoRes.userInfo.openId,
                        sex: infoRes.userInfo.gender,
                        nickName: infoRes.userInfo.nickName,
                        avatarUrl: infoRes.userInfo.avatarUrl,
                        authType: 'wx_unionid'
                      }
                    });
                    // 点击手机号账号登录按钮
                  } else if (res.code == -1) {
                    _this.$message.info(res.data.msg);
                    return;
                  }
                })
                .catch(err => {
                  uni.hideLoading();
                  console.log(err);
                });
            }
          });
        },
        error: function(err) {
          uni.hideLoading();
          console.log(err);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.warp {
  background: #FFFFFF;
  height: 100vh;
  .top{
    height: 480rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .bg_img {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
    }
    .logo{
      width: 180rpx;
      height: 180rpx;
      position: relative;
      z-index: 3;
    }
    .name{
      font-size: 40rpx;
      color: #333333;
      margin-top: 32rpx;
    }
  }
  .main {
    padding: 0 56rpx;
    margin-top: -12rpx;
    position: relative;
    z-index: 4;
    .fu-input {
      display: flex;
      width: 638rpx;
      height: 88rpx;
      border-radius: 88rpx;
      .fu-input-type {
        width: 34rpx;
        height: 34rpx;
        margin: 26rpx 0 26rpx 30rpx;
      }
      .fu-input-main {
        flex: 1;
        height: 88rpx;
        margin-left: 16rpx;
      }
      .fu-get-verify {
        color: #FF7F00;
        line-height: 88rpx;
        text-align: right;
        padding-right: 20rpx;
      }
    }
    
    .paw {
      height: 40rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 34rpx;
      color: #333333;
      text-align: right;
      padding-right: 32rpx;
      margin: 32rpx 0 0;
    }

    // 微信登录按钮 start
    .fu-login-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 638rpx;
      height: 88rpx;
      margin-top: 80rpx;
      color: #fff;
      opacity: 1;
      border-radius: 50rpx;
      background: linear-gradient(90deg, #FFA133 0%, #FF5307 100%);
      &:after {
        border: 0;
      }
      .fu-wx-pic {
        width: 44rpx;
        height: 36rpx;
      }
    }
    // 微信登录 end
  }
  .bottom-box{
    width: 100%;
    position: fixed;
    bottom: 116rpx;
    bottom: calc(116rpx + constant(safe-area-inset-bottom));
    bottom: calc(116rpx + env(safe-area-inset-bottom));

    .third-box{
      width: 100%;
      // margin-bottom: 32rpx;
    }
    .fu-privacy {
    	width: 100%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    
    	.checkbox-img {
    		width: 24rpx;
    		height: 24rpx;
    		margin-right: 8rpx;
    	}
    
    	.fu-action {
    		color: #4177DD;
    	}
    }
  }
}

</style>
